<template>
    <view class="float-nav" :style="[coordinate, {'--gap': pageData.gap + 'px'}]" v-if="pageData && pageData.list">
        <view class="item hidden" v-for="(item,index) in pageData.list" :key="index" @click.stop="$banerGo(item)" :style="{borderRadius: pageData.radius + '%'}"
            :class="[[1, 4].includes(pageData.position) ? 'm-top' : 'm-bot', {'shadow': pageData.shadow == 1}]">
            <image :src="$imgUrls(item.img)" mode="aspectFill"></image>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props: ['pageData'],
    computed: {
        ...mapState(['System', 'totalHeight']),
        coordinate(){
            let x = this.pageData.x + 'px'
            let bottom = this.pageData.y + this.System.safeAreaInsets.bottom + uni.upx2px(100) + 'px'
            let top = this.pageData.y + this.totalHeight + 'px'
            switch (this.pageData.position) {
                case 1: // 右下
                    return { right: x, bottom }
                case 2: // 右上
                    return { right: x, top }
                case 3: // 左上
                    return { left: x, top }
                case 4: // 左下
                    return { left: x, bottom }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.float-nav {
    position: fixed;
    z-index: 1;
    .item {
        width: 90rpx;
        height: 90rpx;
        &.shadow {
            box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,.16);
        }
    }
}
.m-top {
    margin-top: var(--gap);
}
.m-bot {
    margin-bottom: var(--gap);
}
</style>